<template>
    <div class="content">
        <el-row class="buttonList">
            <el-col style="text-align: right">
                <el-button type="primary" style="margin-right: 16px" size="mini" @click="newAddQues">生成试卷</el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="4">
                <el-tree
                        :data="data"
                        :props="defaultProps"
                        highlight-current
                        accordion
                        @node-click="treeNodeClick"
                >
                </el-tree>
            </el-col>
            <el-col :span="20">
                <el-transfer
                        class="transfer"
                        :titles="['可选项', '已选项']"
                        :props="{
                          key: 'ID',
                          label: 'TITLE'
                        }"
                        filterable
                        filter-placeholder="请输入题目名称"
                        v-model="value"
                        :data="transferData">
                    <span slot-scope="{ option }">{{ option.TITLE }}({{option.TYPENUM === 1 ? '单选': '多选'}})</span>
                </el-transfer>
            </el-col>
        </el-row>
        <el-dialog
                title="试卷信息"
                :visible.sync="addQuestionDialog"
                width="60%"
                center
        >
            <el-form
                    ref="organizationReport"
                    :model="questionReport"
                    label-width="100px"
                    label-position="right"
            >
                <el-row>
                    <el-col :span="12">
                        <el-form-item
                                prop="title"
                                :rules="{ required: true, message: '请输入试卷标题', trigger: 'blur' }"
                                label="试卷标题">
                            <el-input size="mini" v-model="questionReport.title" placeholder="请输入试卷标题"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item
                                prop="sumScore"
                                :rules="{ required: true, message: '请输入总分', trigger: 'blur' }"
                                label="总分">
                            <el-input size="mini" v-model="questionReport.sumScore" placeholder="请输入总分"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item
                                prop="passScore"
                                :rules="{ required: true, message: '请输入及格分', trigger: 'blur' }"
                                label="及格分">
                            <el-input size="mini" v-model="questionReport.passScore" placeholder="请输入及格分"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item
                                prop="singleScore"
                                :rules="{ required: true, message: '请输入单选题分数', trigger: 'blur' }"
                                label="单选题分数">
                            <el-input size="mini" v-model="questionReport.singleScore" placeholder="请输入单选题分数"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item
                                prop="multipleScore"
                                :rules="{ required: true, message: '请输入多选题分数', trigger: 'blur' }"
                                label="多选题分数">
                            <el-input size="mini" v-model="questionReport.multipleScore" placeholder="请输入多选题分数"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="addQuestionDialog = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="submit">保 存</el-button>
      </span>
        </el-dialog>
    </div>
</template>

<script>
    import addTestPaper from "./addTestPaper";

    export default {
        name: "testPaper",
        data() {
            return {
                formInline: {},
                data: [],
                defaultProps: {
                    children: 'list',
                    label: 'NAME'
                },
                value: [],
                transferData: [],
                departmentId: '',
                majorId: '',
                gradeNum: '',
                addQuestionDialog: false,
                questionReport: {
                    title: '',
                    sumScore: '',
                    passScore: '',
                    singleScore: '',
                    multipleScore: ''
                }
            }
        },
        created() {
            this.getTree();
            this.$post('/examTopic/findExamTopic').then(res => {
                this.transferData = res.data.data.dataList;
            });
            if(sessionStorage.getItem('testId')) {
                this.$post('/examPaper/findTopicByPaperId', {paperId: sessionStorage.getItem('testId')}).then(res => {
                    for(let i = 0; i < res.data.data.dataList.length; i++) {
                        this.value.push(res.data.data.dataList[i].ID)
                    }
                });
                let msg = JSON.parse(sessionStorage.getItem('paper'));
                this.questionReport.id = sessionStorage.getItem('testId');
                this.questionReport.title = msg.TITLE;
                this.questionReport.sumScore = msg.SUMSCORE;
                this.questionReport.passScore = msg.PASSSCORE;
                this.questionReport.singleScore = msg.SINGLESCORE;
                this.questionReport.multipleScore = msg.MULTIPLESCORE;
            }
        },
        methods: {
            getTree() {
                this.$post('/public/findExamTopic').then(res => {
                    this.data = res.data.data
                })
            },
            newAddQues() {
                if(this.value.length === 0) {
                    this.$message.error('请至少选择一条题干');
                    return;
                }
                this.addQuestionDialog = true
            },
            submit() {
                this.$refs['organizationReport'].validate((valid) => {
                    if(valid){
                        let url = ''
                        if(sessionStorage.getItem('testId')) {
                            url = '/examPaper/update'
                        } else {
                            url = '/examPaper/add'
                        }
                        this.questionReport.topicId = this.value.join();
                        this.$post(url, this.questionReport).then(res => {
                            if(res.data.status === 1) {
                                this.$message.success(res.data.msg);
                                this.$router.go(-1);
                            } else {
                                this.$message.error(res.data.msg)
                            }
                        })
                    }
                })
            },
            treeNodeClick(self,node) {
                this.departmentId = '';
                this.majorId = '';
                this.gradeNum = '';
                if(node.level === 1) {
                    this.departmentId = node.data.ID;
                } else if(node.level === 2) {
                    this.majorId = node.data.ID;
                    this.departmentId = node.parent.data.ID;
                } else if(node.level === 3) {
                    this.gradeNum = node.data.ID;
                    this.majorId = node.parent.data.ID;
                }
                this.$post('/examTopic/findExamTopic', {
                    departmentId: this.departmentId,
                    majorId: this.majorId,
                    gradeNum: this.gradeNum
                }).then(res => {
                    this.transferData = res.data.data.dataList;
                })
            },
        }
    }
</script>

<style scoped lang="scss">
.transfer{
    /deep/.el-transfer__buttons {
        padding: 0 10px;
    }
    /deep/.el-input__inner {
        padding-left: 32px !important;
    }
}
    /deep/.el-transfer-panel {
        width: 42%;
    }
/deep/.el-form-item__error {
    top: 32px;
}
/*/deep/.el-transfer-panel {
    height: 500px;
}*/
/deep/.el-transfer-panel__body {
    height: 430px;
}
/deep/.el-transfer-panel__list.is-filterable {
    height: 100%;
}
</style>
